<template>
  <q-page class="evaluate-page page">
    <div class="evaluate-page-bg"></div>

    <section class="q-pa-md evaluate-page-content">
      <div class="center q-mt-xl q-pt-sm">
        <q-img
          src="~/assets/images/evaluate/img1.png"
          :ratio="452 / 338"
          width="150px"
          no-spinner
          no-transition
        />
      </div>

      <div class="text-center q-mt-md" style="font-weight: bold; font-size: 18px">
        机构匹配成功
      </div>
      <div class="text-center q-mt-sm" style="color: #666666; font-size: 14px">
        将立即与您电话联系，请<span style="color: #fe2f74">注意接听</span>
      </div>

      <div class="q-mt-xs center" v-if="redirectUrl || isToProdList">
        <q-btn
          label="查看更多在线产品"
          padding="none none"
          unelevated
          rounded
          @click="submit"
          class="q-mt-lg"
          style="
            background-color: #096aff;
            color: #fff;
            padding: 8px 40px !important;
            font-size: 15px;
            font-weight: 600;
          "
        />
      </div>
    </section>
  </q-page>
</template>

<script setup lang="ts">
import { useAppStore } from "src/stores/app-store";
import BackHeader from "src/components/BackHeader.vue";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { onUnmounted } from "vue";
import { computed } from "vue";

const router = useRouter();
const route = useRoute();

const redirectUrl = computed(() => {
  return route.query.redirectUrl
    ? decodeURIComponent(route.query.redirectUrl as string)
    : undefined;
});
const isToProdList = computed(() => {
  return route.query.isToProdList ? +route.query.isToProdList : 0;
});

const time = ref(0);
let interval: number | undefined;
const runTime = () => {
  clearInterval(interval);
  interval = window.setInterval(() => {
    time.value--;
    if (time.value <= 0) {
      submit();
      clearInterval(interval);
    }
  }, 1000);
};
// runTime();
onUnmounted(() => {
  clearInterval(interval);
});

const submit = () => {
  if (isToProdList.value) {
    return router.push({ path: "/prodList", query: route.query });
  }
  if (!redirectUrl.value) return;
  window.open(redirectUrl.value, "_blank");
  // router.replace({ path: '/prodList', query: route.query });
};
</script>

<style lang="scss" scoped>
.evaluate-page {
  background-color: #e7f0fb;

  position: relative;
  .evaluate-page-bg {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: url(src/assets/images/evaluate/bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    opacity: 0.6;
  }
  .evaluate-page-bg-color {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    .color-bg {
      background: linear-gradient(180deg, #d7eafd 0%, #f4f6f9 100%);
      opacity: 0.22;
    }
  }
  .evaluate-page-content {
    position: relative;
    z-index: 10;
  }
}
.input-box {
  textarea {
    border: 1px solid #4461e2;
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    font-size: 16px;
  }
}
</style>
